<!--
 * @Author: Haochen
 * @Date: 2021-12-13 10:53:33
 * @LastEditTime: 2021-12-13 11:18:56
 * @FilePath: \students-system\src\components\common\SideMenu.vue
-->
<template>
  <el-menu
    :default-active="$route.path"
    background-color="#e9eef3"
    :router="true"
    active-text-color="#ffc0cb"
  >
    <el-submenu
      v-for="menuItem in menu"
      :key="menuItem._id"
      :index="menuItem._id"
    >
      <template slot="title">{{ menuItem.title }}</template>

      <el-menu-item
        v-for="itemChild in menuItem.children"
        :key="itemChild._id"
        :index="itemChild.path"
      >
        {{ itemChild.title }}
      </el-menu-item>
    </el-submenu>
    <!-- <el-submenu index="1-1">
      <template slot="title">学生管理</template>

      <el-menu-item index="1-1-1"
        ><router-link to="/home/addStudent">新增学生</router-link></el-menu-item
      >
      <el-menu-item index="1-1-2"
        ><router-link to="/home/updateStudent"
          >修改学生</router-link
        ></el-menu-item
      >

      <el-menu-item index="1-1-3"
        ><router-link to="/home/StudentsList"
          >学生列表</router-link
        ></el-menu-item
      >
    </el-submenu>

    <el-submenu index="1-2">
      <template slot="title">专业管理</template>

      <el-menu-item index="1-2-1"
        ><router-link to="/home/addSubject">新增专业</router-link></el-menu-item
      >
      <el-menu-item index="1-2-2"
        ><router-link to="/home/subjectsList"
          >专业列表</router-link
        ></el-menu-item
      >
    </el-submenu>

    <el-submenu index="1-3">
      <template slot="title">教师管理</template>
      <el-menu-item index="1-3-1"
        ><router-link to="/home/addTeacher">新增教师</router-link></el-menu-item
      >
      <el-menu-item index="1-3-2"
        ><router-link to="/home/deleteTeacher"
          >删除教师</router-link
        ></el-menu-item
      >
    </el-submenu>

    <el-submenu index="1-4">
      <template slot="title">班级管理</template>
      <el-menu-item index="1-4-1"
        ><router-link to="/home/addClass">新增班级</router-link></el-menu-item
      >
      <el-menu-item index="1-4-2"
        ><router-link to="/home/deleteClass"
          >删除班级</router-link
        ></el-menu-item
      >
      <el-menu-item index="1-4-3"
        ><router-link to="/home/ClassesList"
          >班级列表</router-link
        ></el-menu-item
      >
    </el-submenu> -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          _id: '1',
          title: '学生管理',
          children: [
            { _id: '1-1', title: '新增学生', path: '/home/addStudent' },
            { _id: '1-2', title: '修改学生', path: '/home/updateStudent' },
            { _id: '1-3', title: '学生列表', path: '/home/studentsList' },
          ],
        },

        {
          _id: '2',
          title: '专业管理',
          children: [
            { _id: '2-1', title: '新增专业', path: '/home/addSubject' },
            { _id: '2-2', title: '专业列表', path: '/home/subjectsList' },
          ],
        },
        {
          _id: '3',
          title: '教师管理',
          children: [
            { _id: '3-1', title: '新增教师', path: '/home/addTeacher' },
            { _id: '3-2', title: '教师列表', path: '/home/deleteTeacher' },
          ],
        },

        {
          _id: '1-4',
          title: '班级管理',
          children: [
            { _id: '1-4-1', title: '新增班级', path: '/home/addClass' },
            { _id: '1-4-2', title: '班级列表', path: '/home/ClassesList' },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
.el-menu {
  overflow: hidden;
}
.el-menu-item {
  margin-left: 14px;
}
</style>
